import cs from 'classnames';
import styles from '../../index.module.less';
import { map, find } from 'lodash';
import { getTodayAlert } from "@/api/modules/dashboard";
import { useRequest } from "ahooks";
import { useState, useEffect } from 'react';


const STA_LIST = [
    { typeDesc: '任务提示', count: 0 },
    { typeDesc: '异常报警', count: 0 },
    { typeDesc: '定时提醒', count: 0 },
]

export default () => {
    const [staList, setStaList] = useState<any>(STA_LIST)
    const { data: data } = useRequest(() => getTodayAlert({}))
    const alertData = data?.data;

    useEffect(() => {
        setStaList(alertData?.alertTypeCounts)
    }, [alertData])

    return (
        <div className={cs(styles.alert, styles.commonBox)}>
            <div className={styles.moduleHeader}>
                <div className={cs(styles.icon, styles.iconAlert)}></div>
                <div className={styles.title}>预警统计</div>
            </div>
            <div className={styles.staBox}>
                {
                    map(staList, (item: any, index: number) => {
                        return (
                            <div className={styles.item} key={index}>
                                <div className={styles.value}>{item.count}</div>
                                <div className={styles.label}>{item.typeDesc}</div>
                            </div>
                        )
                    })
                }
            </div>
            <div className={styles.alertList}>
                {
                    map(alertData?.recentAlerts || [], (item: any, index: number) => {
                        return (
                            <div className={cs(styles.item, item.type === 3 && styles.warning, item.type === 1 && styles.success)}>
                                <div className={styles.up}>
                                    <div className={styles.title}>
                                        <div className={styles.icon}></div>
                                        <div className={styles.label}>{find(staList, (i: any) => i.type === item.type)?.typeDesc}</div>
                                    </div>
                                    <div className={styles.time}>{ item.createTime }</div>
                                </div>
                                <div className={styles.content}>{ item.remark }</div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    )
}